<template>
  <div class="rightDesign3">
    <el-form size="small" label-width="80px">
      <template v-if="activeData.__config__.tag === 'vantGrid'">
        <div style="width: 100%; margin: 0 3%">
          <div class="bottomNav">
            <span>
              导航项内容：
              <el-tooltip
                content="微信规定导航最多五个，超出添加导航项按钮禁用"
                placement="top"
                effect="light"
              >
                <i class="el-icon-warning-outline"></i>
              </el-tooltip>
            </span>
            <el-button type="primary" size="small" @click="addList" :disabled="activeData.columnNum>=5?true:false">+ 添加导航项</el-button>
          </div>
          <el-table
            :data="activeData.bottomData" border
            style="width: 100%; overflow-x: hidden"
          >
            <el-table-column
              prop="name"
              label="导航文字"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="jumpPath"
              label="跳转"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{scope.row.jumpPath}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="icon" label="默认图标" align="center">
              <template slot-scope="scope">
                <!-- scope.row获取当前行所有数据 作用域插槽获取当前行的数据（可以是图片连接如下：:src="scope.row.iconImgLarge"） -->
                <mobile-icon
                  v-if="scope.row.icon"
                  slot="prefix"
                  :icon-class="scope.row.icon"
                  class="el-input__icon"
                  style="height: 32px; width: 18px;"
                />
                <mobile-icon
                  v-else
                  slot="prefix"
                  icon-class="tupian"
                  class="el-input__icon"
                  style="height: 32px; width: 18px"
                />
              </template>
            </el-table-column>
            <!-- <el-table-column
              prop="selectedIcon"
              label="选中图标"
              align="center"
            >
              <template slot-scope="scope">
                <mobile-icon
                  v-show="scope.row.icon"
                  slot="prefix"
                  :icon-class="scope.row.icon"
                  class="el-input__icon"
                  style="height: 32px; width: 16px;"
                />
                <i
                  v-show="!scope.row.icon"
                  slot="prefix"
                  class="el-icon-search el-input__icon"
                />
              </template>
            </el-table-column> -->
            <el-table-column
              prop="sort"
              label="排序"
              align="center"
            >
              <template slot-scope="scope">
                  <i v-if="scope.$index !==0"  class="el-icon-top" style="cursor: pointer;" @click="moveUp(scope.$index,scope.row,activeData.bottomData)"></i>
                  <i v-if="scope.$index !==(activeData.bottomData.length-1)" class="el-icon-bottom" style="cursor: pointer;" @click="moveDown(scope.$index,scope.row,activeData.bottomData)" ></i>
                  <!-- <img :src="up" alt="" style="width:15px;height:22px;display:flex;align-items:center;" @click="changeIndex(scope.row.index,-1)">
                  <img :src="down" alt="" style="width:15px;height:22px;display:flex;align-items:center"  @click="changeIndex(scope.row.index,1)"> -->
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100px" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  circle
                  @click="editClick(scope.row)"
                ></el-button>
                <el-button
                  size="mini"
                  icon="el-icon-delete"
                  circle
                  @click.native.prevent="
                    deleteRow(scope.$index, activeData.bottomData)
                  "
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <template>
            <el-dialog
              title="导航项内容"
              :visible.sync="showDialog"
              width="30%"
            >
              <el-form :model="editForm">
                <el-form-item
                  label="导航文字："
                  :label-width="formLabelWidth"
                  :rules="[
                    {
                      required: true,
                      message: '请输入导航文字',
                    },
                  ]"
                >
                  <el-input
                    v-model="editForm.name"
                    placeholder="请输入导航文字"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="跳转页面："
                  :label-width="formLabelWidth"
                  :rules="[
                    {
                      required: true,
                      message: '请选择跳转页面',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-select
                    v-model="editForm.jumpPath"
                    placeholder="请选择跳转页面"
                    clearable
                  >
                    <el-option v-for="(item, index) in this.$store.state.mobile.pageStore" :label="item" :value="item" :key="index"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="默认图标："
                  :label-width="formLabelWidth"
                  :rules="[
                    {
                      required: true,
                      message: '请选择默认图标',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-popover
                    placement="bottom-start"
                    width="460"
                    trigger="click"
                    @show="$refs['iconSelect'].reset()"
                  >
                    <MobileIconSelect ref="iconSelect" @selected="selected" />
                    <el-input
                      slot="reference"
                      v-model="editForm.icon"
                      placeholder="点击选择图标"
                      readonly
                    >
                      <mobile-icon
                        v-if="editForm.icon"
                        slot="prefix"
                        :icon-class="editForm.icon"
                        class="el-input__icon"
                        style="height: 32px; width: 16px"
                      />
                      <i
                        v-else
                        slot="prefix"
                        class="el-icon-search el-input__icon"
                      />
                    </el-input>
                  </el-popover>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <!-- <el-button @click="showDialog = false">取 消</el-button> -->
                <el-button type="primary" @click="showDialog = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </template>
        </div>
      </template>
      <template v-if="activeData.__config__.tag === 'myTask'">
        <div style="width: 100%; margin: 0 3%">
          <div class="topTask">
            <span>标签项列表：</span>
          </div>
          <el-table border
            :data="activeData.topData"
            style="width: 100%; overflow-x: hidden"
          >
            <el-table-column
              prop="name"
              label="标题"
              align="center"
            >
            </el-table-column>
            <!-- <el-table-column prop="icon" label="图标" align="center">
              <template slot-scope="scope">
                
                <mobile-icon
                  v-if="scope.row.icon"
                  slot="prefix"
                  :icon-class="scope.row.icon"
                  class="el-input__icon"
                  style="height: 32px; width: 18px;"
                />
                <mobile-icon
                  v-else
                  slot="prefix"
                  icon-class="tupian"
                  class="el-input__icon"
                  style="height: 32px; width: 18px"
                />
              </template>
            </el-table-column> -->
            <el-table-column
              prop="jumpPath"
              label="跳转"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{scope.row.jumpPath}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="sort"
              label="排序"
              align="center"
            >
              <template slot-scope="scope">
                <i v-if="scope.$index !==0"  class="el-icon-top" style="cursor: pointer;" @click="moveUp(scope.$index,scope.row,activeData.topData)"></i>
                <i v-if="scope.$index !==(activeData.topData.length-1)" class="el-icon-bottom" style="cursor: pointer;" @click="moveDown(scope.$index,scope.row,activeData.topData)" ></i>
                <!-- <img :src="up" alt="" style="width:15px;height:22px;display:flex;align-items:center;" @click="changeIndex(scope.row.index,-1)">
                <img :src="down" alt="" style="width:15px;height:22px;display:flex;align-items:center"  @click="changeIndex(scope.row.index,1)"> -->
              </template>
            </el-table-column>
            <el-table-column label="操作" width="90px" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  circle
                  @click="editClick(scope.row)"
                ></el-button>
                <el-button
                  size="mini"
                  icon="el-icon-delete"
                  circle
                  @click.native.prevent="
                    deleteRow(scope.$index, activeData.topData)
                  "
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <template>
            <el-dialog
              title="导航项内容"
              :visible.sync="showDialog"
              width="30%"
            >
              <el-form :model="editForm">
                <el-form-item
                  label="导航文字："
                  :label-width="formLabelWidth"
                  :rules="[
                    {
                      required: true,
                      message: '请输入导航文字',
                    },
                  ]"
                >
                  <el-input
                    v-model="editForm.name"
                    placeholder="请输入导航文字"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="跳转页面："
                  :label-width="formLabelWidth"
                  :rules="[
                    {
                      required: true,
                      message: '请选择跳转页面',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-select
                    v-model="editForm.jumpPath"
                    placeholder="请选择跳转页面"
                    clearable
                    disabled
                  >
                    <el-option v-for="(item, index) in this.$store.state.mobile.pageStore" :label="item" :value="item" :key="index"></el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item
                  label="默认图标："
                  :label-width="formLabelWidth"
                  :rules="[
                    {
                      required: true,
                      message: '请选择默认图标',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-popover
                    placement="bottom-start"
                    width="460"
                    trigger="click"
                    @show="$refs['iconSelect'].reset()"
                  >
                    <MobileIconSelect ref="iconSelect" @selected="selected" />
                    <el-input
                      slot="reference"
                      v-model="editForm.icon"
                      placeholder="点击选择图标"
                      readonly
                    >
                      <mobile-icon
                        v-if="editForm.icon"
                        slot="prefix"
                        :icon-class="editForm.icon"
                        class="el-input__icon"
                        style="height: 32px; width: 16px"
                      />
                      <i
                        v-else
                        slot="prefix"
                        class="el-icon-search el-input__icon"
                      />
                    </el-input>
                  </el-popover>
                </el-form-item> -->
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="showDialog = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </template>
        </div>
      </template>
      <template v-if="activeData.__config__.tag === 'functionMenu'">
        <el-form-item label="模块名称">
          <div class="flex">
            <el-input v-model="activeData.moduleName" placeholder="请输入"></el-input>
            <el-checkbox v-model="activeData.isShow" class="marginLeft">隐藏</el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="字号">
           <el-select
                        v-model="activeData.fontSizeModule"
                        :style="{width: '100px'}" @change="changeFont2"
                      >
                      <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                      </el-option>
                     </el-select>
        </el-form-item>
        <el-form-item label="设置">
         <div class="setBox" style="display:flex;flex-wrap:nowrap;align-items: center;">
          <span class="colorSetBox"><el-color-picker v-model="activeData.backColorModule" size="mini" ></el-color-picker></span>
                      <span :class="activeData.boldModule ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyle('boldModule')"> <img :src="boldIcon" /></span>
                      <span :class="activeData.italicModule ? 'checked settingBtn' : 'settingBtn'"  title="倾斜" @click="fontStyle('italicModule')"> <img :src="italicIcon" /></span>
                      <span :class="activeData.underlineModule ? 'checked settingBtn' : 'settingBtn'"  title="下划线" @click="fontStyle('underlineModule')"> <img :src="underlineIcon" /></span>
                      <span :class="activeData.textAlignModule == 'left' ? 'checked settingBtn' : 'settingBtn'"  title="左对齐" @click="fonttext('textAlignModule','left')"><img :src="justifyLeft" /></span>
                      <span :class="activeData.textAlignModule == 'center'? 'checked settingBtn' : 'settingBtn'"  title="居中"  @click="fonttext('textAlignModule','center')"><img :src="justifyCenter" /></span>
                      <span :class="activeData.textAlignModule == 'right' ? 'checked settingBtn' : 'settingBtn'"  title="右对齐"  @click="fonttext('textAlignModule','right')"><img :src="justifyRight" /></span>
                      <span :class="activeData.heightFlagModule ? 'checked settingBtn' : 'settingBtn'"  title="行高"  @click="fontStyle('heightFlagModule')"><img :src="lineHeight" /></span>
                      <el-select
                        v-model="activeData.lineHeightModule" style="width:100px;margin-left:10px;"
                        v-show="activeData.heightFlagModule"  @change="changeHeight2"
                      >
                        <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                        </el-option>
                     </el-select>
       </div>
        </el-form-item>
        <div style="font-size:14px;padding:0 0 10px 10px;font-weight:700">菜单功能配置</div>
        <el-form-item label="列数">
          <el-radio-group v-model="activeData.columnNum">
            <el-radio :label="3">三列</el-radio>
            <el-radio :label="4">四列</el-radio>
            <el-radio :label="5">五列</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单选择">
          <el-checkbox v-model="activeData.menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
          <el-checkbox v-model="activeData.menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
          <el-button type="text" size="medium" style="float:right;padding-right:10px;" @click="btnChange">{{activeData.changeBtn? '确定':'编辑'}}</el-button>
          <el-tree 
            class="tree-border1" 
            :data="activeData.menuOptions" 
            :props="defaultProps" 
            show-checkbox 
            ref="tree-menu" 
            node-key="id"
            :check-strictly="menuCheckStrictly" 
            empty-text="加载中，请稍后" 
            default-expand-all
          ></el-tree>
        </el-form-item>
        <template v-if="activeData.__config__.isShowStyle">
          <div style="font-size:14px;padding:0 0 10px 10px;font-weight:700">常规</div>
          <el-form-item label="标题">
            <div class="flex">
              <el-input v-model="activeData.bottomData[activeData.__config__.defaultValue].name" placeholder="请输入"></el-input>
              <el-checkbox v-model="activeData.bottomData[activeData.__config__.defaultValue].isShowListTitle" class="marginLeft">隐藏</el-checkbox>
            </div>
          </el-form-item>
          <!-- <el-form-item label="标题样式">
            <div>
              <el-radio-group v-model="activeData.listTitleStyle">
                <el-radio :label="1">默认</el-radio>
                <el-radio :label="2">自定义</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <template>
            <el-form-item  label="字号">
              <el-select
                v-model="activeData.fontSize"
                :style="{width: '100%'}" @change="changeFont"
              >
              <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
              </el-option>
              </el-select>
            </el-form-item>
          </template> -->
        </template>
      </template>
    </el-form>
  </div>
</template>
<script>
import up from "@/assets/images/ic_shangyi.png";
import down from "@/assets/images/ic_xiayi.png";
import MobileIconSelect from "@/components/MobileIconSelect";
import {getList} from "@/api/mobile/index.js"
import boldIcon from '@/assets/images/bold_icon.png'
import italicIcon from '@/assets/images/italic.png'
import underlineIcon from '@/assets/images/underline.png'
import justifyLeft from '@/assets/images/justifyLeft.png'
import justifyCenter from '@/assets/images/justifyCenter.png'
import justifyRight from '@/assets/images/justifyRight.png'
import lineHeight from '@/assets/images/lineHeight.png'
import rlinkM from '@/assets/images/rlink-m.png'
export default {
  props: ["activeData"],
  components: {
    MobileIconSelect,
  },
  data() {
    return {
      up,
      down,
      showDialog: false,
      editForm: {},  //表格编辑数据
      formLabelWidth: "100px",
      // menuExpand: false, //是否展开菜单
      // menuNodeAll: false, //是否全选
      menuCheckStrictly: false,  //
      defaultProps: {
        label: "name",
        children: "children",
        id: "id"
      },
      // menuOptions: [{
      //   id: 1,
      //   label: '一级 1',
      //   children: [{
      //     id: 4,
      //     label: '二级 1-1',
      //     children: [{
      //       id: 9,
      //       label: '三级 1-1-1'
      //     }, {
      //       id: 10,
      //       label: '三级 1-1-2'
      //     }]
      //   }]
      // }, {
      //   id: 2,
      //   label: '一级 2',
      //   children: [{
      //     id: 5,
      //     label: '二级 2-1'
      //   }, {
      //     id: 6,
      //     label: '二级 2-2'
      //   }]
      // }, {
      //   id: 3,
      //   label: '一级 3',
      //   children: [{
      //     id: 7,
      //     label: '二级 3-1'
      //   }, {
      //     id: 8,
      //     label: '二级 3-2'
      //   }]
      // }],
      arr: [], // 菜单列表
      fontSize: [
        {label: '10px',val: '10px'},
        {label: '11px',val: '11px'},
        {label: '12px',val: '12px'},
        {label: '13px',val: '13px'},
        {label: '14px',val: '14px'},
        {label: '15px',val: '15px'},
        {label: '16px',val: '16px'},
        {label: '18px',val: '18px'},
        {label: '20px',val: '20px'},
        {label: '24px',val: '24px'},
        {label: '30px',val: '30px'},
        {label: '36px',val: '36px'},
        {label: '48px',val: '48px'},
        {label: '60px',val: '60px'},
        {label: '72px',val: '72px'},
        {label: '84px',val: '84px'},
        {label: '96px',val: '96px'},
        {label: '108px',val: '108px'},
        {label: '120px',val: '120px'},
      ],
      boldIcon,
          italicIcon,
          underlineIcon,
          justifyLeft,
          justifyCenter,
          justifyRight,
          lineHeight,
          rlinkM,
    };
  },
  mounted() {
    this.getMenuList()
    // console.log(this.activeData, "activeData.........");
  },
  watch:{
    activeData:{
      handler(val){
        if(val.__config__.tag === 'functionMenu'){
          this.$nextTick(()=>{
            val.menuOptions = val.menuOptions.length?val.menuOptions:JSON.parse(JSON.stringify(this.arr))
          })
        }
      },
      deep:true
    }
  },
  methods: { 

    //递归函数,选中之后置为disabled = true
    addAttrTrue(data){
      let ids = this.$refs['tree-menu'].getCheckedKeys() //返回目前被选中的节点所组成的数组
      data.forEach((item,index)=>{
        if(ids.indexOf(item.id) !== -1){
          // item.disabled = true
          this.$set(item,"disabled",true)
          if(item.children && item.children.length !==0){
            this.addAttrTrue(item.children)
          }
        }else{
          if(item.children && item.children.length>0){
            this.addAttrTrue(item.children)
          }
        }
      })
    },

    // 递归函数,选中之后置为disabled =false
    addAttrFalse(data){
      data.forEach((item,index)=>{
        this.$set(item,"disabled",false)
        if(item.children && item.children.length !==0){
          this.addAttrFalse(item.children)
        }
      })
    },
    btnChange(){
      let allCurChecked = this.$refs['tree-menu'].getCheckedNodes(false,true);
      allCurChecked = JSON.parse(JSON.stringify(allCurChecked));
      let list = this.$refs['tree-menu'].getCheckedNodes(true,true) //返回目前被选中的节点所组成的数组
      if(this.activeData.changeBtn){//显示确认按钮
        if(allCurChecked&&allCurChecked.length>0){
          this.addAttrTrue(this.activeData.menuOptions)
          function handlerList(obj){
            obj.childMenus = [];
            for(let i=0;i<allCurChecked.length;i++){
              if(allCurChecked[i].parentId === obj.id){
                // allCurChecked[i].path = '' + obj.path + '/' + allCurChecked[i].path;
                 obj.childMenus.push(JSON.parse(JSON.stringify(allCurChecked[i])));
              }
            }
          }
          function handlerAllChecked(arr){
            arr.forEach(val=>{
              if(Array.isArray(val.children) && val.children.length){
                 handlerList(val);
                 delete val.children;
                 handlerAllChecked(val.childMenus);
              }else{
                delete val.children;
              }
            })
          }
          let arr = allCurChecked.filter(item=>{
            return item.parentId===0;
          })
          handlerAllChecked(arr);
          this.activeData.bottomData = arr
          // this.$store.commit('mobile/SET_FUNCTIONMENU',list);
          // this.activeData.menuOptions = [...this.activeData.menuOptions]   //重新渲染
          // this.$refs['tree-menu'].setCheckedKeys(ids, true)  //将选中的打勾
          this.activeData.changeBtn = !this.activeData.changeBtn
        }else{
          this.$message.warning('请至少选中一个菜单');
        }
      }else{//显示编辑按钮
        this.addAttrFalse(this.activeData.menuOptions)
        this.activeData.changeBtn = !this.activeData.changeBtn
      }
    },
    getMenuList(){
      getList().then((res)=>{
        this.arr = res.data
        this.arr.forEach((item,index)=>{
          item['disabled'] = false
        })
        let menuarr = res.data;
      let childarr = [];
        function handlerAllChecked(val){
          delete val.activeMenu;
          delete val.component;
          delete val.icon;
          delete val.keepAlive;
          delete val.thirdMenu;
          delete val.type;
          delete val.visible;
          if(Array.isArray(val.children) && val.children.length){
               for(let i=0;i<val.children.length;i++){
                val.children[i].path = '' + val.path + '/' + val.children[i].path;
               }
               val.children.forEach(item=>{
                handlerAllChecked(item);
               });
            }else{
              childarr.push(val);
            }
        }
        menuarr.forEach(item=>{
          handlerAllChecked(item);
        })
        this.$store.commit('mobile/SET_FUNCTIONMENU',childarr);
      })
    },
    //向上移动
    moveUp(index,row,data) {
      var that = this;
      let upDate = data[index - 1];
      data.splice(index - 1, 1);
      data.splice(index,0, upDate);
    },
    //向下移动
    moveDown(index,row,data){
      var that = this;
      let downDate = data[index + 1];
      data.splice(index + 1, 1);
      data.splice(index,0, downDate);
    },
    //改变字体大小
    changeFont(val){
      this.$set(this.activeData,'fontSize',val);
    },
    // 选择图标
    selected(name) {
      // console.log(name);
      this.editForm.icon = name;
    },
    addList() {
      this.activeData.bottomData.push({
        name: "新增",
        jumpPath: "",
        icon: 'tupian',
        selectedIcon: 'tupian',
        sort: "排序",
      }),
        (this.activeData.columnNum = this.activeData.bottomData.length);
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
      this.activeData.columnNum = this.activeData.bottomData.length;
    },
    editClick(row) {
      this.showDialog = true;
      this.editForm = row;
      // console.log(row)
    },
    // 树权限（展开/折叠）
    handleCheckedTreeExpand(value, type) {
      let treeList = this.activeData.menuOptions;
      for (let i = 0; i < treeList.length; i++) {
        this.$refs['tree-menu'].store.nodesMap[treeList[i].id].expanded = value;
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value) {
      this.$refs['tree-menu'].setCheckedNodes(value ? this.activeData.menuOptions: []);
    },
    changeFont2(val){
        this.$set(this.activeData,'fontSizeModule',val);
      },
      changeHeight2(val) {
         this.$set(this.activeData,'lineHeightModule',val);
      },
      fonttext(data,position) {
        this.$set(this.activeData,data,position );
      },
      fontStyle(data) {
        this.activeData[data] = !this.activeData[data] 
        this.$set(this.activeData,data,this.activeData[data] );
      },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/mobileRightPanel";

.tree-border1 {
  height: 600px;
  overflow: auto;
  margin-top: 5px;
  border: 1px solid #e5e6e7;
  background: #FFFFFF none;
  border-radius:4px;
}
.bottomNav {
  width: 100%;
  padding: 2% 3%;
  font-size: 16px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-between;
}
.topTask {
  width: 100%;
  padding: 3% 0;
  font-size: 16px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-between;
}
.el-table__body-wrapper is-scrolling-left {
  overflow: hidden !important;
}
.colorSetBox{
      display:flex;
    }
</style>
<style>
  .rightDesign3 .el-color-picker__trigger{
     padding:0;
     border-radius: 50%;
     border:none;
     width:28px;
     height:28px;
   }
  .rightDesign3 .el-color-picker__color{
     border-radius: 50%;
   }
   .rightDesign3 .el-color-picker__color-inner{
     border-radius: 50%;
   }
  .el-dialog__header{
    border-bottom: 1px solid #e6e8eb;
  }
 </style>